<template>
  <Page title="出门条">
    <template #navBarCustom> </template>
    <template #content>
      <div class="w-full h-full p-20px box-border">
        <div class="container w-full h-full bg-white flex overflow-hidden">
          <scroll-view ref="scroll" class="flex-1 overflow-scroll px-50px my-24px box-border">
            <div class="avatar">
              <el-image class="img" :src="avatarSrc" :preview-src-list="[avatarSrc]" fit="cover" />
            </div>
            <div class="student-info mt-10px">
              <div class="header flex items-center">
                <div class="title text-333 font-medium mr-10px">离校信息</div>
                <div
                  class="status px-14px flex items-center"
                  :class="ticket.status == 1 ? 'text-FF9B21 bg-FF9B21-10' : ''"
                  v-show="ticket.status == 1"
                >
                  审批中
                </div>
                <div
                  class="status px-14px flex items-center"
                  :class="ticket.status == 2 ? 'text-30C9A1 bg-30C9A1-10' : ''"
                  v-show="ticket.status == 2"
                >
                  已通过
                </div>
                <div
                  class="status px-14px flex items-center"
                  :class="ticket.status == 3 ? 'text-FF4040 bg-FF4040-10' : ''"
                  v-show="ticket.status == 3"
                >
                  未通过
                </div>
              </div>
              <div class="row">
                <span class="text-A3A3A3">学生姓名：</span
                ><span class="text-333">{{ ticket.studentName }}</span>
              </div>
              <div class="row">
                <span class="text-A3A3A3">所在班级：</span
                ><span class="text-333">{{ ticket.syClassName }}</span>
              </div>
              <div class="row">
                <span class="text-A3A3A3">请假类型：</span
                ><span class="text-333">{{ ticket.type === 1 ? '事假' : '病假' }}</span>
              </div>
              <div class="row">
                <span class="text-A3A3A3">开始时间：</span
                ><span class="text-333">{{ ticket.startTime }}</span>
              </div>
              <div class="row">
                <span class="text-A3A3A3">结束时间：</span
                ><span class="text-333">{{ ticket.endTime }}</span>
              </div>
              <div class="row">
                <span class="text-A3A3A3">是否离校：</span
                ><span class="text-333">{{ ticket.leaveType === 0 ? '是' : '否' }}</span>
              </div>
              <div class="row">
                <span class="text-A3A3A3">请假事由：</span
                ><span class="text-333">{{ ticket.reason }}</span>
              </div>
            </div>
            <div class="teacher-info mt-20px">
              <div class="header flex items-center">
                <div class="title text-333 font-medium">相关人员信息</div>
              </div>
              <div class="row">
                <span class="text-A3A3A3">班主任姓名：</span
                ><span class="text-333">{{ ticket.teacherName }}</span>
              </div>
              <div class="row">
                <span class="text-A3A3A3">班主任电话：</span
                ><span class="text-333">{{ ticket.mobile }}</span>
              </div>
            </div>
          </scroll-view>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page'
import ScrollView from '@/components/scroll-view'
import { getAskForLeaveDetailApi } from '@/api/ask-for-leave'

export default {
  components: {
    Page,
    ScrollView
  },
  data() {
    return {
      ticket: {}
    }
  },
  computed: {
    avatarSrc() {
      return this.ticket.faceImgUrl || 'static/icons/icon-leave-head.png'
    }
  },
  created() {
    const { id } = this.$route.query
    this.init(id)
  },
  mounted() {},
  methods: {
    async init(id) {
      if (!id) return

      const { data: ticket } = await getAskForLeaveDetailApi({ id })
      this.ticket = ticket
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  border-radius: 16px;

  .avatar {
    font-size: 0;

    .img {
      width: 128px;
      height: 128px;
    }
  }

  .student-info,
  .teacher-info {
    .header {
      .title {
        font-size: 22px;
      }

      .status {
        height: 28px;
        font-size: 16px;
        border-radius: 14px;
      }
    }

    .row {
      font-size: 20px;
      line-height: 28px;
      display: flex;

      &:nth-child(2) {
        margin-top: 10px;
      }

      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
  }

  .teacher-info {
  }
}
</style>
